<template>
	<view class="company-create-container">
		<!-- 页面标题 -->
		<view class="page-title">创建公司</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 公司名称输入 -->
			<view class="form-item">
				<text class="label">公司名称 *</text>
				<input class="input" v-model="formData.companyName" placeholder="请输入公司名称" maxlength="50" />
			</view>

			<!-- 公司简介输入 -->
			<view class="form-item">
				<text class="label">公司简介</text>
				<textarea class="textarea" v-model="formData.description" placeholder="请输入公司简介（选填）" maxlength="200"
					rows="4"></textarea>
			</view>

			<!-- 允许加入选项 -->
			<view class="form-item">
				<text class="label">允许新用户加入</text>
				<view class="switch-container">
					<switch :checked="formData.allowJoin" @change="formData.allowJoin = $event.detail.value"
						active-color="#007aff" />
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitForm" :disabled="isSubmitting">
			<text class="btn-text">{{ isSubmitting ? '创建中...' : '创建公司' }}</text>
		</view>
	</view>
</template>

<script>
	import {
		createCompany
	} from '@/https/company.js'

	export default {
		data() {
			return {
				// 表单数据
				formData: {
					companyName: '',
					description: '',
					allowJoin: true // 默认允许加入
				},
				// 提交状态
				isSubmitting: false
			}
		},

		methods: {
			/**
			 * 表单验证
			 * @returns {boolean} 验证是否通过
			 */
			validateForm() {
				// 验证公司名称是否为空
				if (!this.formData.companyName || this.formData.companyName.trim() === '') {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
					return false
				}

				return true
			},

			/**
			 * 提交表单创建公司
			 */
			submitForm: async function() {
				// 表单验证
				if (!this.validateForm()) {
					return
				}

				// 设置提交状态
				this.isSubmitting = true

				try {
					// 调用创建公司API
					const params = {
						companyName: this.formData.companyName.trim(),
						description: this.formData.description.trim() || null,
						allowJoin: this.formData.allowJoin ? 1 : 0,
						openId: null // 由后端自动获取
					}

					const res = await createCompany(params)

					// 检查创建是否成功
					if (res) {
						// 显示成功提示
						uni.showToast({
							title: '公司创建成功',
							icon: 'success'
						})

						// 延迟返回上一页，确保用户看到成功提示
						setTimeout(() => {
							// 触发公司更新事件
							if (typeof uni !== 'undefined' && uni.$emit) {
								uni.$emit('company:updated')
							}
							// 返回上一页
							uni.navigateBack()
						}, 1500)
					} else {
						// 显示失败提示
						uni.showToast({
							title: res.message || '公司创建失败',
							icon: 'none'
						})
					}
				} catch (error) {
					// 显示错误提示
					uni.showToast({
						title: error.message || '创建失败，请检查网络连接',
						icon: 'none'
					})
					console.error('创建公司出错:', error)
				} finally {
					// 重置提交状态
					this.isSubmitting = false
				}
			}
		}
	}
</script>

<style scoped>
	.company-create-container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 页面标题 */
	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		text-align: center;
	}

	/* 表单容器 */
	.form-container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;
	}

	/* 表单标签 */
	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	/* 输入框样式 */
	.input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	/* 文本域样式 */
	.textarea {
		width: 100%;
		border: 1rpx solid #eee;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
		min-height: 200rpx;
	}

	/* 开关容器 */
	.switch-container {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10rpx;
	}

	/* 提交按钮 */
	.submit-btn {
		margin-top: 50rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 12rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
	}

	/* 提交按钮禁用状态 */
	.submit-btn[disabled] {
		background-color: #ccc;
		box-shadow: none;
	}

	/* 按钮文本 */
	.btn-text {
		font-size: 32rpx;
	}
</style>